<template>
	<view class="top-bar">
		应在人数:7人
	</view>
	
	<view class="keyword"></view>
	
	<view class="background">
		
		  <view>
			
			<view class="search-container">
			    <input type="text" class="search-input" placeholder="请输入搜索内容" />
			    <button class="search-button">搜索</button>
			</view>
		    <!-- 页面内容区域 -->
		    <view class="card_container">
		    	
			<text class="content_list" v-for="(item, index) in student">
			
			<uni-card class="registationed_card">
			    <image src="../../static/registrationed.png" style="width: 16px; height: 16px;"
				class="registationed_img"></image>   
				<view class="registationed_name">{{item.name}}</view>
				<view class="registationed_num">{{item.number}}</view>
			    <view>学院:{{item.college}}</view>
				<view>专业:{{item.major}}</view>
				<view class="dashed-text">异常情况说明</view>
				<view>辅导员姓名:{{item.counselor.name}}</view>
				<view>工号:{{item.counselor.id}}</view>
				<view class="status" style="color:#006DFF">恢复上报</view>
			</uni-card>
			
			<br></text>
											
		    </view>
		</view>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const student = ref(
	    [{
	        name: '龚熙',
	        number: '20200909',
	        college: 'A学院',
	        major: 'A专业',
	        counselor: {
	            name: '葛海峡',
	            id: '10086'
	        },
	    },
		{
	        name: '李华',
	        number: '20210101',
	        college: 'B学院',
	        major: 'B专业',
	        counselor: {
	            name: '王强',
	            id: '10087'
	        },
	    },
	    {
	        name: '张明',
	        number: '20220303',
	        college: 'C学院',
	        major: 'C专业',
	        counselor: {
	            name: '赵悦',
	            id: '10088'
	        },
	    },
	    {
	        name: '王丽',
	        number: '20230505',
	        college: 'D学院',
	        major: 'D专业',
	        counselor: {
	            name: '孙浩',
	            id: '10089'
	        },
	    },
	    {
	        name: '陈杰',
	        number: '20240707',
	        college: 'E学院',
	        major: 'E专业',
	        counselor: {
	            name: '周琳',
	            id: '10090'
	        },
	    }]
	);
	
</script>

<style>
	.top-bar{
		display: flex;
		height: 42px;
		width: 100vw;
		background-color: #FFE0C7;
		
		justify-content: center;
		align-items: center;
		
		font-weight: 400;
		font-size: 12px;
		
	}
	
	.background{
		width: 100vw;
		height: 100vh;
		background: #F3F5F9;
	}  
	
	.background{
		width: 100vw;
		height: 100vh;
		background: #F3F5F9;
	}     
	
	.horizontal-navbar {
		display: flex;
		background-color: #f5f5f5;
		padding: 10px;
		  
	    justify-content: space-between; /* 均匀分布导航项 */
	    padding: 10px;
	}
	
	.nav-item {
	    flex: 1; /* 让每个导航项占据相等的空间 */
	    text-align: center; /* 文本居中 */
	    margin-right: 20px;
	} 
	
	.search-container {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
		margin-top: 12px;
	}
	
	.search-input {
	    flex: 1;
	    border: 1px solid #ccc;
	    height: 40px;
	    border-radius: 5px;
	    padding-left: 10px;
	}
	
	.search-button {
	    height: 40px;
	    background-color: #007AFF;
	    color: white;
	    border-radius: 5px;
	    margin-left: 10px;
	    padding: 0 20px;
	}
	
	.registationed_img{
		display: flex;
		margin-top: 19px;
		margin-left: 5px;
	}
	
	.registationed_card{
		display: flex;
	}
	
	.dashed-text {
	  border-bottom: 1px dashed #ccc;
	}
	
	.registationed_name{
		display: flex;
		margin-top: 19px;
		text-indent: 10px;
	}
	
	.registationed_num{
		display: flex;
		text-indent: 180px;
	}
	
	.registationed_img,.registationed_name,.registationed_num{
		display: inline-block;
	}
	
	.uni-card>view{
		padding: 15px;
	}
	
	.uni-card{
		padding: auto;
		margin-top:12px;
	}
	       
</style>
